<template>
    <div id="app" class="awaitTask">
        <div class="main">
            <div class="nav">
                <h1>Cron任务</h1>
                <div>
                    <div class="seek">

                    </div>
                </div>
            </div>
            <div class="cont" v-loading="loading" element-loading-text="拼命加载中">
                <ul>
                    <li class="firstLi">
                        <div>事件ID</div>
                        <div>任务名</div>
                        <div>Cron表达式</div>
                        <div>创建时间</div>
                        <div>操作</div>
                    </li>
                    <li class="dataLi" v-for="(item,index) in items" v-show="isDatas">
                        <div>{{item.eventId}}</div>
                        <div>{{item.appName}}</div>
                        <div>{{item.cron}}</div>
                        <div>{{item.createDate | ctimeFun}}</div>
                        <div>
                            <small @click="catalogueClick(index)">
                                <span class="glyphicon glyphicon-list-alt"></span>目录
                            </small>
                            <small @click="compileClick">
                                <span class="glyphicon glyphicon-edit"></span>编辑
                            </small>
                            <small @click="deleteClick">
                                <template>
                                   <el-button class="elbut" type="text"><span class="glyphicon glyphicon-trash"></span>删除</el-button>
                                </template>
                            </small>
                        </div>
                    </li>
                    <li v-show="!isDatas" class="nullLi">
                        <div>暂时没有数据</div>
                    </li>
                    <li class="lastLi">
                        <div class="lastSel">
                            <el-pagination class="elLastPag" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]"
                                :page-size="pageSizeNum" :current-page="currentPage" layout="total, sizes, prev, pager, next"
                                :total="totalNum">
                                </el-pagination>
                        </div>
                        <div class="lastPag">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--更新角色-->
        <div :class="{taskPopup:istaskPopup,taskPopupShow:istaskPopupShow}">
            <transition name="slide-fade">
                <div class="taskP" v-show="TaskShow" v-loading="adding" element-loading-text="正在加载中...">
                    <div>
                        任务执行列表
                        <div class="callBut" @click="callClick">
                            <img src="/static/img/icon_tanc_close.png" alt="">
                        </div>
                    </div>
                    <div class="taskcont">
                        <ul>
                            <li class="taskfirstLi">
                                <div>执行时间</div>
                                <div>node</div>
                                <div>状态</div>
                                <div>action</div>
                            </li>
                            <li class="taskDataLi" v-for="(task,index) in tasks">
                                <div>{{task.executionTime | ctimeFun}}</div>
                                <div>{{task.node | strFun}}</div>
                                <div>{{task.status | nodeFun}}</div>
                                <div>{{task.action}}</div>
                            </li>
                            <li class="taskLastLi">
                                <div>
                                    <el-pagination class="elLastPag" @current-change="TaskhandleCurrentChange" :page-size="pageTaskSizeNum" :current-page="currentTaskPage"
                                        layout="total, prev, pager, next" :total="totalTaskNum">
                                        </el-pagination>
                                </div>
                                <div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'cronJob',
        data() {
            return {
                istaskPopup: true,
                istaskPopupShow: true,
                TaskShow: false,
                loading: false,
                adding: false,
                currentPage: 1,
                pageSizeNum: 10,
                totalNum: 0,
                currentTaskPage: 1,
                pageTaskSizeNum: 10,
                totalTaskNum: 0,
                isSeal: 0,
                items: [],
                tasks: [],
                taskId: '',
                isDatas: true
            }
        },
        created: function () {
            var self = this
            self.loading = true
            // Cron任务
            self.getCronList({
                pageNo: self.currentPage,
                pageSize: self.pageSizeNum
            }).then((data) => {
                console.log(data)
                if (data.code === 200) {
                    if (data.data.list.length > 0) {
                        self.isDatas = true
                        self.items = data.data.list
                        self.totalNum = data.data.total
                        self.loading = false
                    } else {
                        self.isDatas = false
                        self.loading = false
                    }

                }
            }).catch(msg => {
                console.log(msg)
                switch (msg.status) {
                    case 500:
                        break;
                    case 504:
                        break;
                    default:
                        break;
                }
            })
        },
        sockets: {
            // 取消事件
            s_t_ts_c_w_job_cancel: function (data) {
                console.log('Cron监听取消.', data)
                const h = this.$createElement;
                var dataObj = JSON.parse(data)
                this.$notify({
                    title: dataObj.appName + ' 的任务已经取消',
                    message: h('p', { style: 'color: #333' }, '事件ID：' + dataObj.eventId + '。' + '任务名称：' + dataObj.jobName)
                })
                var self = this
                self.loading = true
                // Cron任务
                self.getCronList({
                    pageNo: self.currentPage,
                    pageSize: self.pageSizeNum
                }).then((data) => {
                    console.log(data)
                    if (data.code === 200) {
                        if (data.data.list.length > 0) {
                            self.isDatas = true
                            self.items = data.data.list
                            self.totalNum = data.data.total
                            self.loading = false
                        } else {
                            self.isDatas = false
                            self.loading = false
                        }

                    }
                }).catch(msg => {
                    console.log(msg)
                    switch (msg.status) {
                        case 500:
                            break;
                        case 504:
                            break;
                        default:
                            break;
                    }
                })
            },
            // 完成事件
            s_t_ts_c_w_job_complete: function (data) {
                console.log('Cron监听完成.', data)
                const h = this.$createElement;
                var dataObj = JSON.parse(data)
                this.$notify({
                    title: dataObj.appName + ' 的任务已经完成',
                    message: h('p', { style: 'color: #333' }, '事件ID：' + dataObj.eventId + '。' + '任务名称：' + dataObj.jobName)
                })
                var self = this
                self.loading = true
                // Cron任务
                self.getCronList({
                    pageNo: self.currentPage,
                    pageSize: self.pageSizeNum
                }).then((data) => {
                    console.log(data)
                    if (data.code === 200) {
                        if (data.data.list.length > 0) {
                            self.isDatas = true
                            self.items = data.data.list
                            self.totalNum = data.data.total
                            self.loading = false
                        } else {
                            self.isDatas = false
                            self.loading = false
                        }
                    }
                }).catch(msg => {
                    console.log(msg)
                    switch (msg.status) {
                        case 500:
                            break;
                        case 504:
                            break;
                        default:
                            break;
                    }
                })
            }
        },
        filters: {
            ctimeFun: function (val) {
                if (val) {
                    var now = new Date(val)
                    var year = now.getYear() - 100;
                    var month = now.getMonth() + 1;
                    month = month > 9 ? month : "0" + month
                    var date = now.getDate();
                    date = date > 9 ? date : "0" + date
                    var hour = now.getHours();
                    hour = hour > 9 ? hour : "0" + hour
                    var minute = now.getMinutes();
                    minute = minute > 9 ? minute : "0" + minute
                    return "20" + year + "-" + month + "-" + date + "   " + hour + ":" + minute;
                } else {
                    return '无'
                }
            },
            strFun: function (val) {
                if (val) {
                    return val
                } else {
                    return '无'
                }
            },
            nodeFun: function (val) {
                if (val) {
                    if (val == 0) {
                        return '完成'
                    } else if (val == -1) {
                        return '异常'
                    }
                } else {
                    return '无'
                }
            }
        },
        methods: {
            // 设置每页个数
            handleSizeChange(val) {
                var self = this
                self.loading = true
                self.getCronList({
                    pageNo: self.pageSizeNum,
                    pageSize: self.currentPage
                }).then((data) => {
                    console.log(data)
                    if (data.code === 200) {
                        if (data.data.list.length > 0) {
                            self.isDatas = true
                            self.items = data.data.list
                            self.totalNum = data.data.total
                            self.loading = false
                        } else {
                            self.isDatas = false
                            self.loading = false
                        }

                    }
                }).catch(msg => {
                    console.log(msg)
                    switch (msg.status) {
                        case 500:
                            break;
                        case 504:
                            break;
                        default:
                            break;
                    }
                })
            },
            // 点击分页
            handleCurrentChange(val) {
                var self = this
                self.loading = true
                self.currentPage = val
                self.getCronList({
                    pageNo: val,
                    pageSize: self.pageSizeNum
                }).then((data) => {
                    console.log(data)
                    if (data.code === 200) {
                        if (data.data.list.length > 0) {
                            self.isDatas = true
                            self.items = data.data.list
                            self.totalNum = data.data.total
                            self.loading = false
                        } else {
                            self.isDatas = false
                            self.loading = false
                        }
                    }
                }).catch(msg => {
                    console.log(msg)
                    switch (msg.status) {
                        case 500:
                            break;
                        case 504:
                            break;
                        default:
                            break;
                    }
                })
            },
            // 执行任务分页
            TaskhandleCurrentChange(val) {
                var self = this
                self.currentPage = val
                self.taskJob({
                    pageNum: self.pageTaskSizeNum,
                    pageSize: val,
                    jobId: self.taskId
                }).then((data) => {
                    console.log(data)
                    if (data.code === 200) {
                        if (data.data.list.length > 0) {
                            self.tasks = data.data.list
                            self.totalTaskNum = data.data.total
                        } else {

                        }
                    }
                }).catch(msg => {
                    console.log(msg)
                    switch (msg.status) {
                        case 500:
                            break;
                        case 504:
                            break;
                        default:
                            break;
                    }
                })
            },
            // 关闭弹窗
            callClick() {
                this.istaskPopupShow = true
                this.TaskShow = false

            },
            // 目录
            catalogueClick(index) {
                this.istaskPopupShow = false
                this.TaskShow = true
                var self = this
                self.taskId = self.items[index].id
                self.taskJob({
                    pageNum: self.pageTaskSizeNum,
                    pageSize: self.currentTaskPage,
                    jobId: self.items[index].id
                }).then((data) => {
                    console.log(data)
                    if (data.code === 200) {
                        if (data.data.list.length > 0) {
                            self.tasks = data.data.list
                            self.totalTaskNum = data.data.total
                        } else {

                        }
                    }
                }).catch(msg => {
                    console.log(msg)
                    switch (msg.status) {
                        case 500:
                            break;
                        case 504:
                            break;
                        default:
                            break;
                    }
                })
            },
            // 编辑
            compileClick() {

            },
            // 删除
            deleteClick() {

            },

            ...mapActions(['getCronList','taskJob'])
        }
    }

</script>

<style scoped>
    .awaitTask {
        width: 100%;
        display: flex;
        justify-content: center;
        min-height: 700px;
        height: 100%;
        overflow: hidden;
    }
    
    .main {
        width: 96%;
        min-height: 650px;
        height: 100%;
        border-top: 2px solid #58b7ff;
        border-radius: 3px;
    }
    
    .nav {
        height: 150px;
        width: 100%;
        background-color: #fff;
        overflow: hidden;
    }
    
    .nav>h1 {
        width: 100%;
        font-size: 18px;
        line-height: 40px;
        color: #34bba0;
        border-bottom: 1px solid #f4f5f6;
        margin: 0;
        padding: 0;
        height: 40px;
        padding-left: 25px;
    }
    
    .nav>div {
        width: 100%;
        height: 85px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    
    .seek {
        width: 95%;
        height: 85px;
        border-bottom: 1px dashed #ccc;
    }
    
    .cont {
        background-color: #fff;
        margin-top: 20px;
        width: 100%;
        min-height: 550px;
        height: 100%;
        border: 1px solid #8492a6;
        border-radius: 3px;
        margin-bottom: 30px;
    }
    
    .cont>ul>li {
        height: 45px;
        line-height: 45px;
        display: flex;
        border-bottom: 1px solid #8492a6;
        text-align: center;
    }
    
    .cont>ul>li:nth-child(1) {
        background-color: rgba(0, 0, 0, 0.1);
    }
    
    .cont>ul>li>div {
        width: 20%;
        border-left: 1px solid #8492a6;
        padding-left: 2px;
        padding-right: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    .cont>ul>li>div:nth-child(1) {
        border-left: 0;
    }
    
    .cont>ul .dataLi>div:last-child small {
        cursor: pointer;
        padding: 3px;
        border-radius: 2px;
        margin-left: 5px;
        margin-right: 5px;
        border: 1px solid #ddd;
        color: #666;
        font-size: 14px;
    }
    
    .cont>ul .nullLi>div:nth-child(1) {
        width: 100%;
        text-align: center;
    }
    
    .cont>ul .dataLi>div:last-child small span {
        font-size: 12px;
        margin-right: 3px;
        color: #666
    }
    
    .elbut {
        color: #666;
        margin: 0;
        padding: 0;
    }
    
    .lastSel {
        height: 45px;
    }
    
    .cont>ul .lastLi {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .cont>ul .lastLi>div:nth-child(1) {
        border-left: 0;
        margin-top: 15px;
        height: 45px;
        z-index: 1;
        width: 80%;
    }
    
    .cont>ul .lastLi>div:nth-child(2) {
        border-left: 0;
        margin-top: 15px;
        height: 45px;
        width: 10%;
    }
    /*目录*/
    
    .taskPopup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000000000;
        overflow: hidden;
    }
    
    .taskP {
        width: 900px;
        min-height: 500px;
        background-color: #fff;
        border-radius: 5px;
    }
    
    .taskP>div:nth-child(1) {
        width: 100%;
        height: 60px;
        font-size: 20px;
        text-align: center;
        font-weight: 600;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
        position: relative;
        overflow: hidden;
    }
    
    .callBut {
        position: absolute;
        top: -5px;
        right: 5px;
        width: 35px;
        height: 50px;
        cursor: pointer;
    }
    
    .callBut img {
        width: 20px;
        height: 22px;
    }
    
    .taskcont {
        margin: 0 auto;
        width: 99.5%;
        min-height: 450px;
    }
    
    .taskcont>ul>li {
        display: flex;
        height: 40px;
        line-height: 40px;
        color: #333;
        border-bottom: 1px solid #ccc;
        text-align: center;
    }
    
    .taskcont>ul>li>div:nth-child(1) {
        border-left: 0;
    }
    
    .taskcont>ul>li:nth-child(1) {
        background-color: rgba(0, 0, 0, 0.1);
    }
    
    .taskcont>ul .taskDataLi:hover {
        background-color: #f4f5f6;
    }
    
    .taskcont>ul .taskLastLi {
        width: 100%;
        display: flex;
        overflow: hidden;
    }
    
    .taskcont>ul .taskLastLi>div:nth-child(1) {
        width: 80%;
        border: 0;
        margin-top: 5px;
    }
    
    .taskcont>ul .taskLastLi>div:nth-child(2) {
        border: 0;
    }
    
    .taskcont>ul>li>div {
        width: 25%;
        border-left: 1px solid #ccc;
    }
    
    .taskPopupShow {
        display: none;
    }
    
    .slide-fade-enter-active {
        transition: all 0.7s ease;
    }
    
    .slide-fade-enter,
    .slide-fade-leave-active {
        transform: translateY(-30px);
        opacity: 0;
    }
</style>